<template>
    <div class="mainDiv">
        <div class="rowHead">
            <el-date-picker class="w300" v-model="times" type="daterange" align="right" placeholder="选择日期范围（默认当天日期）" :picker-options="timeArea" v-qx="permission.date" readonly>
            </el-date-picker>
            <el-button type="primary" icon="el-icon-d-arrow-left" @click="goBack()">返回</el-button>
        </div>
        <el-row :gutter="20">
            <el-col :span="10" class="pl0">        
                <el-table :data="shopFeat" height="600" id="leftTable" @row-click="look">
                    <el-table-column type="expand">
                        <el-table :data="dlist" :stripe="true" @expand-change="showChilds" @row-click="look">
                            <el-table-column type="expand">
                                <template slot-scope="scope">
                                    <el-table :data="scope.row.list" :stripe="true" @row-click="look">
                                        <el-table-column prop="dname" label="小组"></el-table-column>
                                        <el-table-column prop="total" label="现金业绩"></el-table-column>
                                        <el-table-column prop="katotal" label="卡耗业绩"></el-table-column>
                                    </el-table> 
                                </template>
                            </el-table-column>
                            <el-table-column prop="dname" label="部门" :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="total" label="现金业绩">
                            </el-table-column>
                            <el-table-column prop="katotal" label="卡耗业绩"></el-table-column>
                        </el-table>
                    </el-table-column>
                    <el-table-column prop="dname" label="门店" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="total" label="现金业绩">
                    </el-table-column>
                    <el-table-column prop="katotal" label="卡耗业绩">
                    </el-table-column>                       
                </el-table>         
            </el-col>
            <el-col :span="14" class="pr0">
                <el-table :data="ylist" :stripe="true" height="600">
                    <el-table-column prop="ordertype" label="业绩类型"></el-table-column>
                    <el-table-column prop="name" label="员工姓名"></el-table-column>
                    <el-table-column prop="worknum" label="员工工号"></el-table-column>
                    <el-table-column prop="xianjinyeji" label="现金业绩"></el-table-column>
                    <el-table-column prop="kahaoyeji" label="卡耗业绩"></el-table-column>
                    <el-table-column prop="addtime" label="业绩时间" show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{scope.row.addtime|hourTime}}
                        </template>
                    </el-table-column>
                    <el-table-column label="详情">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-h-chakan" size="mini" @click="chakan(scope.row)" v-qx="permission.info"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block center bg-light">
                    <el-pagination layout="prev, pager, next" :page-size="page.limits" @current-change="currpage" :total="total">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
        
    </div>
</template>
<script>
import C from '#/src/common/common.js'
import P from '#/src/shop/popup.js'

export default {
    name: 'featList',
    data() {
        return {
            dlist: [],
            ylist: [],
            shopFeat:[],
            page: {
                pages: 1,
                limits: 15,
            },
            total: 0,
            times: [new Date(), new Date()],
            timeArea: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const td = new Date()
                        td.setHours(0)
                        td.setMinutes(0)
                        td.setSeconds(0)
                        td.setMilliseconds(0)
                        const start = new Date()
                        start.setTime(td.getTime() - 3600 * 1000 * 24 * 7)
                        picker.$emit('pick', [start, td])
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const td = new Date()
                        td.setHours(0)
                        td.setMinutes(0)
                        td.setSeconds(0)
                        td.setMilliseconds(0)
                        const start = new Date()
                        start.setTime(td.getTime() - 3600 * 1000 * 24 * 30)
                        picker.$emit('pick', [start, td])
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const td = new Date()
                        td.setHours(0)
                        td.setMinutes(0)
                        td.setSeconds(0)
                        td.setMilliseconds(0)
                        const start = new Date()
                        start.setTime(td.getTime() - 3600 * 1000 * 24 * 90)
                        picker.$emit('pick', [start, td])
                    }
                }]
            },
            pid: 0,
            floor: 0,
            permission: {
                date: 'bumenfeat_date',
                info: 'bumenfeat_info',
            }
        }
    },
    created(){
        let that = this
        that.times = this.$route.params.times
        that.getShopFeat()
    },
    mounted: function() {
        let that = this
        that.getList()        
    },
    methods: {
        showChilds: async function(row) {
            //防止重复请求    
            if( row.flag ) return

            let rdata = {
                pid: row.did,
                times: JSON.stringify(this.times)
            }

            if (!this.times) {
                rdata.times = JSON.stringify([new Date(), new Date()])
            }
            let res = await C.ajax('/shop/money/getfeatchild', rdata, 'post')
            if ( res ) {
                row.list = res
                row.flag = true
            }
        },

        look: function(row) {
            this.pid = row.did
            this.floor = row.floor           
            this.getInfo()
        },

        chakan: async function(row) {
            let obj = { id: row.orderid, ordertype: row.ordertype }
            await P.showOrderPopup(obj)
        },

        currpage: function(val) {
            this.page.pages = val
            this.getInfo()
        },

        getInfo: async function() {
            let ydata = {
                pid: this.pid,
                floor: this.floor,
                times: JSON.stringify(this.times),
                page: JSON.stringify(this.page),
            }
            if (!this.times) {
                ydata.times = JSON.stringify([new Date(), new Date()])
            }
            let res = await C.ajax('/shop/money/getfeatlist', ydata, 'post')
            if (res) {
                this.total = res.count
                this.ylist = res.data
            }
        },

        getList: async function() {
            if (!this.times) {
                this.times = [new Date(), new Date()]
            }
            let res = await C.ajax('/shop/money/getfeatinfo', { times: JSON.stringify(this.times) }, 'post')
            if (res) {
                res.forEach((v) => {
                    v.list = []
                })
                this.dlist = res
            }
        },

        getShopFeat : async function() {
            let that = this
            let times = that.times
            let res = await C.ajax('/shop/money/getshopfeat', { times: JSON.stringify(times) }, 'post')
            that.shopFeat = res
        },

        goBack(){            
            this.$router.go(-1)
        },

        test(){
            console.log('test')
        }
    }
}
</script>

<style>
    .flex_spcb{
        display:flex;
        justify-content: space-between;
    }
    #leftTable .el-table__body-wrapper{
        overflow-y: auto;
    }
    #leftTable .el-table__row{
        cursor: pointer;
    }
    .rowHead{
        padding: 10px;
        background-color: #fff;
        margin: 0px 0px 10px 0px !important;
    }         
    .groupHead span,.groupBody span{
        width: 33.33%;
        text-align: center;
    }
    .groupBody{
        padding: 5px 0;
    }
    .groupBody:hover{
        background-color: #FAFAFA;
        transition: background-color .25s ease;
        cursor: pointer;
    }    
</style>